<script lang="ts" setup>
import { ref, nextTick, inject } from 'vue'
import { useMemberStore, usePhoneStore } from '@/stores'
import { onHide, onLoad, onShow } from '@dcloudio/uni-app'
import { postActiviryAcquireApi, postActivityInfoApi } from '@/services/my'
import { PageSkip } from '@/utils/tools'

const { loginPromise } = <{ loginPromise: Promise<unknown> }>inject('globalData')

const phoneStore = usePhoneStore()
const memberStore = useMemberStore()
const backgroundImage = ref('')
const SkipPopupRef = ref()

const popupRef = ref()
const query = ref({
  invitationClientId: '',
  marketingId: null,
})

/**返回首页 */
const back = () => {
  PageSkip('/pages/index/index', 'reLaunch')
}

/**获取新人福利 */
const getWelfare = () => {
  if (memberStore.token) {
    getPopup()
  } else {
    popupRef.value.open()
  }
}
const textObj = ref({
  text_one: '欢迎加入麦德范',
  text_two: '新人福利已到账，快来吃饭吧！',
})

/** 点击弹窗按钮  */
const receive = () => {
  uni.switchTab({ url: '/pages/eat/eat' })
  console.log('点击按钮跳转至吃饭页面')
}

/** 调用弹窗接口 */
const getPopup = async () => {
  try {
    const res = await postActiviryAcquireApi({
      marketingId: query.value?.marketingId,
      invitationClientId: query.value?.invitationClientId,
    })
    // console.log("获取邀请用户",res)
    if(res.code !== 200){
      textObj.value.text_one = '您无法参与此活动'
      textObj.value.text_two = ''
    }
    await nextTick()
    SkipPopupRef.value.open()

  } catch (error) {
    console.log(error)
  }
}

/**获取被邀请人背景图 */
const postActivityInfo = async () => {
  // console.log('入参', query.value)
  try {
    const res = await postActivityInfoApi({
      marketingId: query.value?.marketingId,
      invitationClientId: query.value?.invitationClientId,
    })
    backgroundImage.value = res?.data?.shareBackgroundImg
  } catch (error) {
    console.log(error)
  }
}

onLoad((opacity: any) => {
  // console.log('opacity', opacity)
  query.value = opacity
  loginPromise.then(() => {
    postActivityInfo()
    getPopup()
    // if (!memberStore.token) return
    // getPopup()
  })
})
</script>

<template>
  <!-- <view class="dianzi" :style="{ height: phoneStore.phoneInfo?.top + 'px' }"> </view> -->
  <view
    class="newcomerWelfare"
    :style="{
      backgroundImage: `url(${backgroundImage})`,
    }"
  >
    <view
      class="iconfont icon_home"
      :style="{ top: 2 + Number(phoneStore.phoneInfo!.top)  + 'px' }"
      @tap="back()"
    ></view>
    <button class="getWelfare" @tap="getWelfare()" hover-class="view-hover"></button>
  </view>
  <BjsSkipPopup :textObj="textObj" ref="SkipPopupRef" @receive="receive" />
  <BjsPopup :invitationClientId="query.invitationClientId" ref="popupRef" />
</template>
<style lang="scss">
.dianzi {
  width: 100%;
  background: #cbeab1;
}
.newcomerWelfare {
  position: relative;
  width: 100%;
  height: 1780rpx;
  background-size: cover; /* 设置背景图大小适应容器 */
  background-position: center; /* 设置背景图位置居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-size: 100%;
  background-repeat: no-repeat;
  .getWelfare {
    width: 558rpx;
    height: 120rpx;
    line-height: 84rpx;
    font-size: 40rpx;
    color: #fff;
    font-weight: 700;
    margin-top: 610rpx;
    border-radius: 40rpx;
    background: transparent;
  }
  .iconfont {
    position: absolute;
    left: 36rpx;
    top: 14rpx;
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 50%;
    color: #000;
    text-align: center;
    background: #fff;
    font-size: 44rpx;
  }
}
</style>
